/* 模块一 */
.bgbox {
  position: relative;
  top: 0;
  left: 0;
  height: 650px;
  overflow: hidden;
  /* padding: 10px 0; */
  background-size: cover;
}

@keyframes arrow {
  0% {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
}

.icon-arrow {
  position: absolute;
  bottom: 32px;
  left: 50%;
  margin-left: -18px;
  width: 36px;
  height: 20px;
  background: url(../images/10001\ \(2\).png) center no-repeat;
  background-position: -1091px -161px;
  z-index: 9;
  font-size: 30px;
  animation: arrow 1.5s infinite linear both 2s;
}

.meue .bgbox .bg1 {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  padding: 10px 0;
  background: url(../images/10001.jpg) center no-repeat;
  background-size: cover;
  /* display: none; */
}

.bg1 .bg1-p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -294px;
  margin-top: -195px;
  width: 587px;
  height: 145px;
  text-indent: -99em;
  overflow: hidden;
  background-image: url(../images/10001\ \(2\).png);
  background-position: 0 -312px;
  z-index: 3
}

.bg1 .bg1-btn {
  position: absolute;
  top: 50%;
  left: 39%;
  margin-top: 12px;
  margin-left: -2px;
  width: 293px;
  height: 69px;
  text-indent: -99em;
  overflow: hidden;
  z-index: 9;
  background-image: url(../images/10001\ \(2\).png);
  background-position: -416px -859px;
}

/* 流星 */
@keyframes meteor {
  0% {
    opacity: 0;
    transform: translate(216px, -304px);
  }

  100%,
  24% {
    opacity: 0;
    transform: translate(0, 0);
  }

  12% {
    opacity: 1;
    transform: translate(108px, -152px);
  }
}

.bg1 .lx::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 108px;
  height: 152px;
  background: url(../images/10002\ \(2\).png) 0 0 no-repeat;
  background-size: cover;
}

.bg1 .lx {
  position: absolute;
  width: 171px;
  height: 168px;
  -webkit-animation: star 4.5s both infinite linear;
  animation: meteor 4.5s both infinite linear;
  text-indent: -99em;
  overflow: hidden;
}

.bg1 .lx-1 {
  top: 380px;
  left: 20px;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

.bg1 .lx-2 {
  top: 320px;
  right: 100px;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.bg1 .lx-3 {
  top: 260px;
  left: 50%;
  margin-left: 200px;
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

.bg1 .lx-4 {
  top: 200px;
  left: 50%;
  margin-left: -200px;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.bg1 .lx-5 {
  top: 640px;
  left: 50%;
  margin-left: -400px;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.bg1 .lx-6 {
  top: 400px;
  left: 50%;
  margin-left: 400px;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.bgbox .bg2 {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  padding: 10px 0;
  background: url(../images/bb.jpg) center no-repeat;
  background-size: cover;
  display: none;
}

.bg2 .bg2-p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -205px;
  width: 623px;
  height: 145px;
  text-indent: -99em;
  overflow: hidden;
  background-image: url(../images/10001\ \(2\).png);
  background-position: 0 0;
  z-index: 3;
}

.bg2 .bg2-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 12px;
  margin-left: -2px;
  width: 293px;
  height: 69px;
  text-indent: -99em;
  overflow: hidden;
  z-index: 9;
  background-image: url(../images/10001\ \(2\).png);
  background-position: -416px -859px;
}

.bgbox .bg3 {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  padding: 10px 0;
  background: url(../images/10003\ \(3\).jpg) center no-repeat;
  background-size: cover;
  display: none;
}

.bg3 .bg3-p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -185px;
  margin-left: -2px;
  width: 370px;
  height: 159px;
  text-indent: -99em;
  overflow: hidden;
  background-image: url(../images/10001\ \(2\).png);
  ;
  background-position: -636px -323px;
  z-index: 3;
}

.bg3 .bg3-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 12px;
  margin-left: -2px;
  width: 293px;
  height: 69px;
  text-indent: -99em;
  overflow: hidden;
  z-index: 9;
  background-image: url(../images/10001\ \(2\).png);
  background-position: -416px -859px;
}

.bgbox .bg4 {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  padding: 10px 0;
  background: url(../images/10001\ \(3\).jpg) center no-repeat;
  background-size: cover;
  display: none;
}

.bg4 .bg4-p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -205px;
  width: 520px;
  height: 149px;
  text-indent: -99em;
  overflow: hidden;
  background-image: url(../images/10001\ \(2\).png);
  background-position: -636px 0;
  z-index: 3;
}

.bg4 .bg4-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 12px;
  margin-left: -2px;
  width: 293px;
  height: 69px;
  text-indent: -99em;
  overflow: hidden;
  z-index: 9;
  background-image: url(../images/10001\ \(2\).png);
  background-position: -416px -859px;
}

.jingling {
  position: absolute;
  left: 0;
  top: 480px;
  width: 100%;
  height: 190px;
  border-top: 2px solid rgb(154, 150, 150);
  text-align: center;
}

.jingling .jingling-content {
  position: relative;
  /* overflow: hidden; */
  height: 169px;
  font-size: 24px;
  line-height: left;

}

.jl-pc .icon-windows {
  font-size: 40px;
  padding: 10px;
}

.jl-mac .icon-mac {
  font-size: 40px;
  padding: 10px;
}

.jl-android .icon-anzhuo {
  font-size: 40px;
  padding: 10px;
}

.jl-iphone .icon-pingguo {
  font-size: 40px;
  padding: 10px;
}

.jingling .jingling-content span {
  display: block;
}

.jingling .jingling-content .active {
  opacity: 1;
  border-top: 2px solid #fff;
}

.jingling .jingling-content .jl-pc a,
.jingling .jingling-content .jl-mac a,
.jingling .jingling-content .jl-iphone a,
.jingling .jingling-content .jl-android a {
  color: #fff;
}

.jingling .jingling-content .jl-pc:hover,
.jingling .jingling-content .jl-mac:hover,
.jingling .jingling-content .jl-iphone:hover,
.jingling .jingling-content .jl-android:hover {
  opacity: 1;
  /* border-top: 2px solid  #fff; */
}

.jingling .jingling-content .jl-pc {
  position: absolute;
  top: -2px;
  left: 120px;
  display: inline-block;
  width: 145px;
  height: 171px;
  padding: 40px 0;
  margin: 0 155px 0 0;
  opacity: .5;
  color: #fff;
  border-top: 2px solid transparent;
}

.jingling .jingling-content .jl-mac {
  position: absolute;
  top: -2px;
  left: 388px;
  display: inline-block;
  width: 145px;
  height: 171px;
  padding: 40px 0;
  margin: 0 155px 0 0;
  opacity: .5;
  color: #fff;
}

.jingling .jingling-content .jl-iphone {
  position: absolute;
  top: -2px;
  left: 666px;
  display: inline-block;
  width: 145px;
  height: 170px;
  padding: 40px 0;
  margin: 0 155px 0 0;
  opacity: .5;
  color: #fff;
}

.jingling .jingling-content .jl-android {
  position: absolute;
  top: -2px;
  left: 900px;
  display: inline-block;
  width: 145px;
  height: 170px;
  padding: 40px 0;
  opacity: .5;
  color: #fff;
}

.jingling .jingling-content .active {
  opacity: 1;
  border-top: 2px solid #fff;
}

.meue {
  width: 100%;
  height: 650px;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: rgba(0, 0, 0, .3);

}

.meue .nav {
  margin: 16px auto;
  width: 996px;
  height: 46px;
}

h1 {
  float: left;
  margin-right: 40px;
}

.meue .nav li a {
  vertical-align: bottom;
  font-size: 20px;
  margin-right: 40px;
  color: #ffff;
}

.meue .nav .fl {
  float: left;
  line-height: 46px;
}

.meue .nav .fl .chanpindongtai {
  color: #31c27c;
}

.meue .nav .fr {
  float: right;
  line-height: 46px;

}

/* 模块二 */
@keyframes pic {
  0% {
    transform: scale(120%);
  }

  25% {
    transform: scale(110%);
  }

  100% {
    transform: scale(100%);
  }
}

.part-item-pic {
  animation: pic .7s .3s;
}

.singer {
  position: relative;
  height: 900px;
  overflow: hidden;
}

.icon-arrow {
  position: absolute;
  bottom: 32px;
  left: 50%;
  margin-left: -18px;
  width: 36px;
  height: 20px;
  background-image: url(../images/10001\ \(2\).png);
  background-position: -1091px -161px;
  z-index: 99;
  animation: arrow 1.5s infinite linear both 2s;
}

.singer .singer-p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -283px;
  margin-top: -100px;
  width: 566px;
  height: 74px;
  background-image: url(../images/10001\ \(2\).png);
  background-position: -556px -630px;
  z-index: 10;
}

.singer .singer-sp {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 0;
  margin-left: -202px;
  width: 404px;
  height: 69px;
  background-image: url(../images/10001\ \(2\).png);
  background-position: 0 -859px;
  z-index: 10;
}

.singer .singer-part {
  width: 211px;
  height: 211px;
  position: relative;
  float: left;

}

.singer .singer-item {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -534px -951px;
  width: 1920px;
  height: 1069px;
}

.singer .part-item-pic {
  position: relative;
  width: 212px;
  height: 212px;
  float: left;
  margin: 0 auto;
}

.singer .singer-part .part-item-pic1 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0;
  z-index: 9;
}

.singer .singer-part .part-item-pic2 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -212px;
  z-index: 9;
}

.singer .singer-part .part-item-pic3 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -424px;
  z-index: 9;
}

.singer .singer-part .part-item-pic4 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -636px;
  z-index: 9;
}

.singer .singer-part .part-item-pic5 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -848px;
  z-index: 9;
}

.singer .singer-part .part-item-pic6 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -1060px;
  z-index: 9;
}

.singer .singer-part .part-item-pic7 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -1272px;
  z-index: 9;
}

.singer .singer-part .part-item-pic8 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -1484px;
  z-index: 9;
}

.singer .singer-part .part-item-pic9 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -1696px;
  z-index: 9;
}

.singer .singer-part .part-item-pic10 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -1908px;
  z-index: 9;
}

.singer .singer-part .part-item-pic11 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -2120px;
  z-index: 9;
}

.singer .singer-part .part-item-pic12 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -2332px;
  z-index: 9;
}

.singer .singer-part .part-item-pic13 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -2756px;
  z-index: 9;
}

.singer .singer-part .part-item-pic14 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -2332px;
  z-index: 9;
}

.singer .singer-part .part-item-pic15 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -2544px;
  z-index: 9;
}

.singer .singer-part .part-item-pic16 {
  background: url(../images/10002\ \(2\).jpg) no-repeat;
  background-position: 0 -2756px;
  z-index: 9;
}

.singer .singer-part .part-item-pic17 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -3604px;
  z-index: 9;
}

.singer .singer-part .part-item-pic18 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -3816px;
  z-index: 9;
}

.singer .singer-part .part-item-pic19 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -4028px;
  z-index: 9;
}

.singer .singer-part .part-item-pic20 {
  background-position: 0 -4240px;
  z-index: 9;
}

.singer .singer-part .part-item-pic21 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -4452px;
  z-index: 9;
}

.singer .singer-part .part-item-pic22 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -3180px;
  z-index: 9;
}

.singer .singer-part .part-item-pic23 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0;
  z-index: 9;
}

.singer .singer-part .part-item-pic24 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -212px;
  z-index: 9;
}

.singer .singer-part .part-item-pic25 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -5300px;
  z-index: 9;
}

.singer .singer-part .part-item-pic26 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -424px;
  z-index: 9;
}

.singer .singer-part .part-item-pic27 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -636px;
  z-index: 9;
}

.singer .singer-part .part-item-pic28 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -848px;
  z-index: 9;
}

.singer .singer-part .part-item-pic29 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -1060px;
  z-index: 9;
}

.singer .singer-part .part-item-pic30 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -212px;
  z-index: 9;
}

.singer .singer-part .part-item-pic31 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -1272px;
  z-index: 9;
}

.singer .singer-part .part-item-pic32 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -1482px;
  z-index: 9;
}

.singer .singer-part .part-item-pic33 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -1696px;
  z-index: 9;
}

.singer .singer-part .part-item-pic34 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -212px;
  z-index: 9;
}

.singer .singer-part .part-item-pic35 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -212px;
  z-index: 9;
}

.singer .singer-part .part-item-pic36 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -1908px;
  z-index: 9;
}

.singer .singer-part .part-item-pic37 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -2120px;
  z-index: 9;
}

.singer .singer-part .part-item-pic38 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -2332px;
  z-index: 9;
}

.singer .singer-part .part-item-pic39 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -2544px;
  z-index: 9;
}

.singer .singer-part .part-item-pic40 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -2756px;
  z-index: 9;
}

.singer .singer-part .part-item-pic41 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -2968px;
  z-index: 9;
}

.singer .singer-part .part-item-pic42 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -3180px;
  z-index: 9;
}

.singer .singer-part .part-item-pic43 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -3392px;
  z-index: 9;
}

.singer .singer-part .part-item-pic44 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -3604px;
  z-index: 9;
}

.singer .singer-part .part-item-pic45 {
  background: url(../images/10003\ \(2\).jpg) no-repeat;
  background-position: 0 -3816px;
  z-index: 9;
}

/* 模块三 */
.shejiao {
  position: relative;
  width: 100%;
  height: 1076px;
}

.icon-arrow {
  position: absolute;
  bottom: 32px;
  left: 50%;
  margin-left: -18px;
  width: 36px;
  height: 20px;
  background-image: url(../images/10001\ \(2\).png);
  background-position: -1091px -161px;
  z-index: 99;
  animation: arrow 1.5s infinite linear both 2s;
}

.shejiao-ft {

  height: 349px;
  background: url(../images/10002\ \(1\).jpg) center no-repeat;
}

.shejiao-fc {

  height: 350px;
  background: url(../images/10003\ \(1\).jpg)center no-repeat;
  background-size: cover;
}

.shejiao-fb {

  height: 376px;
  background: url(../images/10004.jpg)center no-repeat;
}

/* 模块四 */
.zhineng {
  position: relative;
  width: 100%;
  height: 1056px;
}

.icon-arrow {
  position: absolute;
  bottom: 32px;
  left: 50%;
  margin-left: -18px;
  width: 36px;
  height: 20px;
  background-image: url(../images/10001\ \(2\).png);
  background-position: -1091px -161px;
  z-index: 99;
  animation: arrow 1.5s infinite linear both 2s;
}

.zhineng-ft {

  height: 500px;
  background: url(../images/10005\ \(1\).jpg) center no-repeat;
}

.zhineng-fb {

  height: 567px;
  background: url(../images/10006.jpg) center no-repeat;
}

/* 模块五 */
.tuijian {
  position: relative;
  width: 100%;
  height: 920px;
  background: url(../images/10007.jpg) center no-repeat;
  text-align: center;
}

.tuijian-ft {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -400px;
  margin-top: 0;
  width: 255px;
  height: 329px;
  height: 350px;
  background: url(../images/10008\ \(1\).png) center no-repeat;
}

.tuijian-fc {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -392px;
  width: 620px;
  height: 784px;
  background: url(../images/10009\ \(1\).png) 0 0 no-repeat;
}

.tuijian-fb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 620px;
  height: 376px;
  background: url(../images/10010.png) 0 0 no-repeat;
}

.tuijian-fp-h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -580px;
  margin-top: -321px;
  width: 544px;
  height: 136px;
  background-image: url(../images/10001\ \(2\).png);
  background-position: 0 -630px;
  z-index: 2;
}

.tuijian .tuijian-fp-h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -580px;
  margin-top: -164px;
  width: 454px;
  height: 63px;
  background-image: url(../images/10001\ \(2\).png);
  background-position: -562px -778px;
  z-index: 2
}

.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 72px;
  background-color: rgba(0, 0, 0, .3);

}

.footer .footer-fb {
  padding: 14px 0;
}

.footer .footer-fb p {
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}